import { UserConfig } from '@/api';
import { Icon, Popup } from '@antmjs/vantui';
import { Image, Text, View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { useState } from 'react';
import { useRequest } from 'taro-hooks';
import { TemplateMessage } from 'types/user';

export default function useCustomerService() {
  const [show, setShow] = useState<boolean>(false);
  // 获取配置
  const { data: url } = useRequest(() => UserConfig({ type: 4 }));

  function renderNode() {
    return (
      <Popup
        zIndex={99999}
        show={show}
        style={{
          backgroundColor: 'transparent',
          top: '40vh',
        }}
      >
        <View className=' flex justify-end mb-2'>
          <Icon
            className=' text-white text-3xl'
            name='close'
            onClick={() => setShow(false)}
          />
        </View>
        <View
          className='w-[600px] text-center py-10 rounded-xl'
          style={{
            background: 'linear-gradient(180deg, #D3EDFF 0%, #FFFFFF 100%);',
          }}
        >
          <View className=' w-[340px] h-[340px] mx-auto my-4'>
            {url && (
              <Image
                showMenuByLongpress
                src={url}
                className=' w-full h-full block'
                mode='aspectFill'
              />
            )}
          </View>
          <Text className=' text-xs text-gary3'>扫描二维码添加客服微信</Text>
        </View>
      </Popup>
    );
  }

  return {
    open: async () => {
      //@ts-ignore
      await Taro.requestSubscribeMessage({
        tmplIds: [
          TemplateMessage.余额变动提醒,
          TemplateMessage.积分变动提醒,
          TemplateMessage.预约结果通知,
        ],
      });

      setShow(true);
    },
    renderNode,
  };
}
